<!DOCTYPE html>

<html>

<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>新增${(type==0)?string("DIY", "标准")}页面</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
<body>
<div style="margin: 15px;">
    <form class="layui-form" action="" id="submitForm">
        <input type="hidden" name="type" value="${type}">
        <input type="hidden" name="pageId" value="${page.pageId}">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input name="title" placeholder="页面名称" class="layui-input" value="${page.title!}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block">
                <input name="permissions" class="layui-input" value="${page.permissions!}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否菜单</label>
            <div class="layui-input-block">
                <input type="radio" name="imMenu" value="false" title="否" <#if !(page.imMenu ?? && page.imMenu)>checked</#if>>
                <input type="radio" name="imMenu" value="true" title="是" <#if (page.imMenu ?? && page.imMenu)>checked</#if>>
            </div>
        </div>
        <div class="layui-form-item" id="sql_pane">
            <#if page.sqls ??>
            <#list page.sqls as sql>
                <label class="layui-form-label">SQL${sql_index}</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea sqls" name="sqls">${sql}</textarea>
                </div>
            </#list>
            <#elseif type == 1>
                <label class="layui-form-label">SQL0</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea sqls" name="sqls">${sql}</textarea>
                </div>
            </#if>
        </div>
        <div class="layui-form-item">
            <#if type == 0>
                <a href="javascript:;" class="layui-btn" style="width: 100%;" onclick="add_sql()">+SQL</a>
            <#elseif type == 1>
                <a href="javascript:;" class="layui-btn" style="width: 100%;" onclick="flush_params()">确认SQL</a>
            </#if>
        </div>
        <div id="stand-pane" <#if type == 0||type == 2>style="display: none;"</#if>>
            <fieldset class="layui-elem-field layui-field-title" id="stand-part">
                <legend>搜索参数</legend>
                <div id="search_params">
                    <#list page.searchParams as param>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <select class="fieldName" value="${param.field}">
                                    <option value="${param.field}">${param.field}</option>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <select class="fieldType">
                                    <option value="1" <#if param.type == 1>selected</#if>>文本框</option>
                                    <option value="2" <#if param.type == 2>selected</#if>>下拉选</option>
                                    <option value="3" <#if param.type == 3>selected</#if>>日期选择</option>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <input class="layui-input fieldValue" value="${param.fieldText}" placeholder="描述">
                            </div>
                            <div class="layui-inline">
                                <input class="layui-input content" value="${param.content}" placeholder="默认值">
                            </div>
                            <div class="layui-inline">
                                <a href="javascript:;" onclick="del_line(this)" class="layui-btn layui-btn-normal layui-btn-danger">X</a>
                            </div>
                        </div>
                    </#list>
                </div>
                <div class="layui-form-item">
                    <a href="javascript:;" onclick="add_line();" class="layui-btn" style="width: 100%;">+</a>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field layui-field-title">
            <legend>列设定</legend>
            <div id="col_part">
                <#if page.fieldMapper ??>
                <#list page.fieldMapper?keys as key>
                    <div class="layui-form-item">
                        <label class="layui-form-label">${key}</label>
                        <div class="layui-inline">
                            <input class="layui-input" value="${page.fieldMapper[key]}">
                        </div>
                        <div class="layui-inline">
                            <a class="layui-btn layui-btn-normal layui-btn-danger" href="javascript:;" onclick="del_line(this)">x</a>
                        </div>
                    </div>
                </#list>
                </#if>
            </div>
        </fieldset>
        </div>
        <div id="diy-pane" <#if type == 1||type == 2>style="display: none"</#if>>
            <div class="layui-form-item">
                <label class="layui-form-label">HTML</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" id="htmlContent">${page.htmlContent!}</textarea>
                </div>
            </div>
        </div>
            <div class="layui-form-item" <#if type == 0 || type == 1>style="display: none" </#if>>
                <label class="layui-form-label">链接</label>
                <div class="layui-input-block">
                    <input name="pageUrl" class="layui-input" value="${page.url!}">
                </div>
            </div>
        <div class="layui-form-item">
            <a href="javascript:;" class="layui-btn" onclick="addDiyPage()">立即提交</a>
        </div>
    </form>


</div>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/js/custom_common.js?t=1"></script>
<script>
    var form, layer;
    layui.use(['form', 'layedit', 'laydate'], function() {
        form = layui.form();
        layer = layui.layer;
    });

    var page_type='${type}';

    // 新增
    function addDiyPage(){
        var params = $("#submitForm").serializeObject();
        if (page_type == '1') {
            var fieldMap = '';
            $('#col_part .layui-form-item').each(function (i, col) {
                var key = $(col).find('.layui-form-label').text();
                var value = $(col).find('input').val();
                fieldMap += ',' + key + ':' + value;
            });
            params.fieldMap = fieldMap.substring(1);
            $('#search_params .layui-form-item').each(function (i, p) {
                params['params['+i+'].field'] = $(p).find('.fieldName').val();
                params['params['+i+'].type'] = $(p).find('.fieldType').val();
                params['params['+i+'].fieldText'] = $(p).find('.fieldValue').val();
                params['params['+i+'].content'] = $(p).find('.content').val();
            });

            if (params.sqls) {
                params.sqls = params.sqls.replace(/\s+/g, ' ');
            }
        } else {
            var sqlNN = false;
            $('#sql_pane .sqls').each(function (i, s) {
                var s = $(s).val();
                if (panIsNull(s)) {
                    alert('sql 不能为空');
                    sqlNN = true;
                }
            });
            if (sqlNN){
                return;
            }
            params.htmlContent = $('#htmlContent').val();
        }
        console.log(params);


        var index = parent.layer.getFrameIndex(window.name);
        var loadi = layer.load();
        $.post("/diy/newpage.json", params, function(data) {
            layer.close(loadi);
            if(data.result === 'success'){
                window.parent.location.reload();
                window.parent.layer.close(index);
            }else {
                layer.alert(data.msg);
            }
        });
    }

    function del_line(btn) {
        $(btn).parents('.layui-form-item').remove();
    }

    function add_line() {
        var html = "<div class=\"layui-form-item\">\n" +
                "                    <div class=\"layui-inline\">\n" +
                "                        <select class=\"fieldName\">\n" +
                "                            <option value=\"\">未选择</option>\n" +
                "                        </select>\n" +
                "                    </div>\n" +
                "                    <div class=\"layui-inline\">\n" +
                "                        <select class=\"fieldType\">\n" +
                "                            <option value=\"0\">下拉选</option>\n" +
                "                            <option value=\"1\">文本框</option>\n" +
                "                        </select>\n" +
                "                    </div>\n" +
                "                    <div class=\"layui-inline\">\n" +
                "                        <input class=\"layui-input fieldValue\" placeholder='描述'>\n" +
                "                    </div>\n" +
                "                    <div class=\"layui-inline\">\n" +
                "                        <input class=\"layui-input content\" placeholder='默认值'>\n" +
                "                    </div>\n" +
                "                    <div class=\"layui-inline\">\n" +
                "                        <a href=\"javascript:;\" onclick=\"del_line(this)\" class=\"layui-btn layui-btn-normal layui-btn-danger\">X</a>\n" +
                "                    </div>\n" +
                "                </div>";
        $('#search_params').append($(html));
        flush_options();
        form.render();
    }

    var index = 1;
    <#if type == 0>
        index = 0;
    </#if>
    <#if page ??>
        index = ${page.sqls?size};
    </#if>
    function add_sql() {
        var html = '<label class="layui-form-label">SQL' + index++ + '</label>' +
                '<div class="layui-input-block">' +
                '<textarea class="layui-textarea" name="sqls[]"></textarea>' +
                '</div>';
        $('#sql_pane').append($(html));
    }

    var paramList = [];
    flush_params(1);
    function flush_params(init) {

        var sql = $('#sql_pane textarea').val();
        if (!sql){
            return;
        }
        var fieldMapHtml = '';
        paramList = [];
        sql = sql.toLowerCase();
        if (sql.indexOf('select') == 0) {
            var from = sql.indexOf('from');
            if (from != -1) {
                var names = sql.substring(7, from);
                var np = names.split(',');
                for (var u=0;u<np.length;u++) {
                    var n = np[u].trim();
                    var ns = n.split(/\s+/);
                    n = ns[ns.length - 1];
                    if (ns.length == 1) {
                        if (n.indexOf('.') != -1) {
                            n = n.substring(n.indexOf('.') + 1);
                        }
                    } else {
                        n = n.replace(/(`)/g, '');
                    }
                    var ignore = false;
                    for (var m=0;m<paramList.length;m++) {
                        if (n == paramList[m]) {
                            ignore = true;
                            break;
                        }
                    }
                    if (ignore)
                        continue;
                    paramList.push(n);
                }
            }
        }
        for (var j=0; j<paramList.length; j++) {
            fieldMapHtml += "<div class=\"layui-form-item\">\n" +
                    "                        <label class=\"layui-form-label\">" + paramList[j] + "</label>\n" +
                    "                        <div class=\"layui-inline\">\n" +
                    "                            <input class=\"layui-input\">\n" +
                    "                        </div>\n" +
                    "                        <div class=\"layui-inline\">\n" +
                    "                            <a class=\"layui-btn layui-btn-normal layui-btn-danger\" href=\"javascript:;\" onclick=\"del_line(this)\">x</a>\n" +
                    "                        </div>\n" +
                    "                    </div>";
        }
        flush_options();
        if (!init) {
            $('#col_part').empty().append($(fieldMapHtml));
            form.render();
        }
    }

    function flush_options() {
        var options = '';
        for (var i=0; i<paramList.length; i++) {
            options += '<option value="'+paramList[i]+'">'+paramList[i]+'</option>'
        }
        if (paramList.length > 0) {
            $('#search_params .fieldName').each(function (i, ta) {
                var v = $(ta).val();
                $(ta).empty().append($(options)).val(v);
            });
        }
    }
</script>
</body>

</html>